import {messages} from "share/common";
import React from 'react'
import {Button, Row, Col, Form, Radio} from 'antd'
import menuRoute from 'routes/menuRoute'
import 'styles/expense-reimbursement-control/mileage-subsidy/mileage-subsidy.scss'
import mileageSubsidyService from 'containers/expense-reimbursement-control/mileage-subsidy/mileage-subsidy.service'
import BaseService from 'share/base.service'

const FormItem = Form.Item
const RadioGroup = Radio.Group;
import {connect} from 'react-redux';

class PriceMileageSetting extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      saving: false,
      susidyUrl: menuRoute.getRouteItem('mileage-subsidy', 'key')
    }
  }

  componentWillMount() {
  }

  handleBack = () => {
    this.context.router.push(this.state.susidyUrl.url)
  };
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.setState({saving: true});
        let params = {
            "scope": "company",
            "profiles": []
        };
        Object.keys(values).map(item => {
          let p = {
            key: item.replace(/_/g, '.'),
            value: values[item]
          };
          params.profiles.push(p);
        });
        mileageSubsidyService.savePriceMileageSetting(params)
          .then(() => {
            BaseService.getProfile().then(() => {
              this.setState({saving: false});
              this.handleBack();
            })
          })
          .catch(() => this.setState({saving: false}))
      }
    })
  };

  render() {
    const {getFieldDecorator, saving} = this.props.form;
    return (
      <div className="mileage-subsidy">
        <Row>
          <Col span={8}>
            <div className="mode">{messages('setting.key779'/*当前模式：单价模式*/)}</div>
          </Col>
          <Col span={12}/>
          <Col span={4}>
          </Col>
        </Row>
        <Form onSubmit={this.handleSubmit}>
          {/*员工是否可修改单价*/}
          <FormItem label={messages('setting.key781'/*员工是否可修改单价*/)}>
            {
              getFieldDecorator('unit_price_modify_enable', {
                initialValue: this.props.profile['unit.price.modify.enable'] ? 'true' : 'false'
              })(
                <RadioGroup>
                  <Radio value='false'>{messages('setting.key783'/*不可修改*/)}</Radio>
                  <Radio value='true'>{messages('setting.key782'/*可修改*/)}</Radio>
                </RadioGroup>
              )
            }
          </FormItem>
          <div className="button-area">
            <Button type="primary" htmlType="submit" loading={saving}>{messages('common.save')}</Button>
            <Button onClick={() => this.handleBack()} className="cancelButton">{messages('common.cancel')}</Button>
          </div>
        </Form>
      </div>
    )
  }
}

PriceMileageSetting.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    profile: state.login.profile
  }
}

const wrappedStaircaseMileageSetting = Form.create()(PriceMileageSetting);

export default connect(mapStateToProps)(wrappedStaircaseMileageSetting);
